<!DOCTYPE html>
<html>
  <head>
  <meta http-equiv="content-type" content="text/html; charset=utf-8">
  <meta content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0" name="viewport">
  <meta name="description" content="tong.li&#39;s blog">
  <meta name="keyword" content="彤哥哥博客，95后技术爱好者,现就职于同程旅行/同程艺龙上海分公司，专注于互联网技术分享的平台。">
  
    <link rel="shortcut icon" href="/css/images/icon.png">
  
  <title>
    
      前端构建工具webpack入门 | 彤哥哥的博客
    
  </title>
  <link href="https://cdn.staticfile.org/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet">
  <link href="https://cdn.staticfile.org/nprogress/0.2.0/nprogress.min.css" rel="stylesheet">
  <link href="https://cdn.staticfile.org/highlight.js/9.12.0/styles/tomorrow-night.min.css" rel="stylesheet">
  
<link rel="stylesheet" href="/css/style.css">

  
  <script src="https://cdn.staticfile.org/jquery/3.2.1/jquery.min.js"></script>
  <script src="https://cdn.staticfile.org/geopattern/1.2.3/js/geopattern.min.js"></script>
  <script src="https://cdn.staticfile.org/nprogress/0.2.0/nprogress.min.js"></script>
  
    
<script src="/js/qrious.js"></script>

  
  
  
  
    <!-- MathJax support START -->
    <script type="text/x-mathjax-config">
      MathJax.Hub.Config({
        tex2jax: {
          inlineMath: [ ['$','$'], ["\\(","\\)"]  ],
          processEscapes: true,
          skipTags: ['script', 'noscript', 'style', 'textarea', 'pre', 'code']
        }
      });
    </script>

    <script type="text/x-mathjax-config">
      MathJax.Hub.Queue(function() {
        var all = MathJax.Hub.getAllJax(), i;
        for (i=0; i < all.length; i += 1) {
          all[i].SourceElement().parentNode.className += ' has-jax';
        }
      });
    </script>
    <script type="text/javascript" src="https://cdn.staticfile.org/mathjax/2.7.5/MathJax.js?config=TeX-AMS-MML_HTMLorMML"></script>
    <!-- MathJax support END -->
  


  
  
    
<script src="/js/local-search.js"></script>


<meta name="generator" content="Hexo 5.4.2"></head>
<div class="wechat-share">
  <img src="/css/images/logo.png" />
</div>
  <body>
    <header class="header fixed-header">
  <div class="header-container">
    <a class="home-link" href="/">
      <div class="logo"></div>
      <span>彤哥哥的博客</span>
    </a>
    <ul class="right-list">
      
        <li class="list-item">
          
            <a href="/" class="item-link">主页</a>
          
        </li>
      
        <li class="list-item">
          
            <a href="/series/" class="item-link">分类</a>
          
        </li>
      
        <li class="list-item">
          
            <a href="/tags/" class="item-link">标签</a>
          
        </li>
      
        <li class="list-item">
          
            <a href="/archives/" class="item-link">归档</a>
          
        </li>
      
        <li class="list-item">
          
            <a href="/project/" class="item-link">项目</a>
          
        </li>
      
        <li class="list-item">
          
            <a href="/about/" class="item-link">关于</a>
          
        </li>
      
      
        <li class="menu-item menu-item-search right-list">
    <a role="button" class="popup-trigger">
        <i class="fa fa-search fa-fw"></i>
    </a>
</li>
      
    </ul>
    <div class="menu">
      <span class="icon-bar"></span>
      <span class="icon-bar"></span>
      <span class="icon-bar"></span>
    </div>
    <div class="menu-mask">
      <ul class="menu-list">
        
          <li class="menu-item">
            
              <a href="/" class="menu-link">主页</a>
            
          </li>
        
          <li class="menu-item">
            
              <a href="/series/" class="menu-link">分类</a>
            
          </li>
        
          <li class="menu-item">
            
              <a href="/tags/" class="menu-link">标签</a>
            
          </li>
        
          <li class="menu-item">
            
              <a href="/archives/" class="menu-link">归档</a>
            
          </li>
        
          <li class="menu-item">
            
              <a href="/project/" class="menu-link">项目</a>
            
          </li>
        
          <li class="menu-item">
            
              <a href="/about/" class="menu-link">关于</a>
            
          </li>
        
      </ul>
    </div>
    
      <div class="search-pop-overlay">
    <div class="popup search-popup">
        <div class="search-header">
            <span class="search-icon">
                <i class="fa fa-search"></i>
            </span>
            <div class="search-input-container">
                <input autocomplete="off" autocapitalize="off"
                    placeholder="Please enter your keyword(s) to search." spellcheck="false"
                    type="search" class="search-input">
            </div>
            <span class="popup-btn-close">
                <i class="fa fa-times-circle"></i>
            </span>
        </div>
        <div id="search-result">
            <div id="no-result">
                <i class="fa fa-spinner fa-pulse fa-5x fa-fw"></i>
            </div>
        </div>
    </div>
</div>
    
  </div>
</header>

    <div id="article-banner">
  <h2>前端构建工具webpack入门</h2>
  <p class="post-date">2020-02-11</p>
  <div class="arrow-down">
    <a href="javascript:;"></a>
  </div>
</div>
<main class="app-body flex-box">
  <!-- Article START -->
  <article class="post-article">
    <section class="markdown-content"><h1 id="1-为什么要学习webpack"><a href="#1-为什么要学习webpack" class="headerlink" title="1. 为什么要学习webpack"></a>1. 为什么要学习webpack</h1><p>​        说到项目构建工具(依赖管理、环境配置管理、打包、测试、发布)，我们Java工程师最熟悉的莫过于<a target="_blank" rel="noopener" href="https://maven.apache.org/">Maven</a>或<a target="_blank" rel="noopener" href="https://gradle.org/">Gradle</a>,Maven是当下Java岗位最流行的项目构建工具，而Gradle以最简洁的DSL语法成为了最受欢迎的构建工具，较早是受Android工程师欢迎，现在在Java服务器端技术广泛使用，比如我们常用的<a target="_blank" rel="noopener" href="https://github.com/spring-projects/spring-boot">Spring Boot</a> 框架目前最新版本都是通过Gradle构建。</p>
<p>​        Maven较为保守，灵活性没有Gradle大，Gradle是借助于Ant和Maven基础上改进并基于Groovy开发的新型简洁语法构建工具。Maven和Gradle的区别请点击<a target="_blank" rel="noopener" href="https://www.zhihu.com/question/29338218">这里</a>，我在这里不多累述。随着前端的模块化和组件化开发，今天呢，我作为一名后端工程师，也来讲一讲前端的模块打包器webpack。</p>
<h2 id="1-1-Web站点的资源类型"><a href="#1-1-Web站点的资源类型" class="headerlink" title="1.1 Web站点的资源类型"></a>1.1 Web站点的资源类型</h2><h3 id="1-1-1-静态资源"><a href="#1-1-1-静态资源" class="headerlink" title="1.1.1 静态资源"></a>1.1.1 静态资源</h3><ul>
<li>JavaScript脚本文件: .js、.jsx、.coffee、 .ts（TypeScript  类 C# 语言）</li>
<li>样式文件: .css、 .less、 .sass、 .scss   </li>
<li>图片文件: .png、.jpg、 jpeg、 gif、 .svg、 .bmp位图文件等</li>
<li>字体文件(Fonts): .svg、  .ttf、 .eot、   .woff、  .woff2</li>
<li>模板文件: .ejs(hexo博客)、 .swig(hexo-next博客) 、 .jade、  .vue【这是在webpack中定义组件的方式，推荐这么用】</li>
<li>视频资源: .mp4、.webm、ogg<h3 id="1-1-2-动态资源"><a href="#1-1-2-动态资源" class="headerlink" title="1.1.2 动态资源"></a>1.1.2 动态资源</h3></li>
<li>微软系：.asp、aspx(.NET平台的动态网页,asp技术的扩展)</li>
<li>Oracle/Sun： 典型的Java模板引擎有.jsp、 .ftl(freemaker模板)、 .vm(velocity模板，常用于代码生成器)、Thymeleaf模板(Spring Boot官方推荐的模板)</li>
</ul>
<h2 id="1-2-引入网页资源导致的问题"><a href="#1-2-引入网页资源导致的问题" class="headerlink" title="1.2 引入网页资源导致的问题"></a>1.2 引入网页资源导致的问题</h2><ol>
<li>网页加载速度慢， 因为我们要发起很多的二次请求；</li>
<li>要处理错综复杂的依赖关系</li>
</ol>
<h2 id="1-3-解决方案"><a href="#1-3-解决方案" class="headerlink" title="1.3 解决方案"></a>1.3 解决方案</h2><h3 id="1-3-1-通用解决方案"><a href="#1-3-1-通用解决方案" class="headerlink" title="1.3.1 通用解决方案"></a>1.3.1 通用解决方案</h3><ol>
<li>合并、压缩、精灵图、图片的Base64编码</li>
<li>可以使用requireJS解决、也可以使用webpack可以解决各个包之间的复杂依赖关系；</li>
</ol>
<h3 id="1-3-2-完美解决方案"><a href="#1-3-2-完美解决方案" class="headerlink" title="1.3.2 完美解决方案"></a>1.3.2 完美解决方案</h3><ol>
<li>使用Gulp， 是基于 task 任务的；</li>
<li>使用Webpack， 是基于整个项目进行构建的；</li>
</ol>
<ul>
<li>借助于webpack这个前端自动化构建工具，可以完美实现资源的合并、打包、压缩、混淆等诸多功能。</li>
<li>根据官网的图片介绍webpack打包的过程</li>
<li><a target="_blank" rel="noopener" href="http://webpack.github.io/">webpack官网</a></li>
</ul>
<h1 id="2-webpack基础"><a href="#2-webpack基础" class="headerlink" title="2. webpack基础"></a>2. webpack基础</h1><blockquote>
<p>webpack 是一个模块打包器。webpack 的主要目标是将 JavaScript 文件打包在一起，打包后的文件用于在浏览器中使用，但它也能够胜任转换(transform)、打包(bundle)或包裹(package)任何资源(resource or asset)。</p>
</blockquote>
<p>我的理解为: webpack 是前端的一个项目构建工具，它是基于 Node.js 开发出来的一个前端工具；</p>
<h2 id="2-1-webpack安装的两种方式"><a href="#2-1-webpack安装的两种方式" class="headerlink" title="2.1 webpack安装的两种方式"></a>2.1 webpack安装的两种方式</h2><ol>
<li>运行<code>npm i webpack -g</code>全局安装webpack，这样就能在全局使用webpack的命令，4.x版本需要安装webpack-cli，我安装webpack的版本是4.41.5</li>
<li>在项目根目录中运行<code>npm i webpack --save-dev</code>安装到项目依赖中</li>
</ol>
<h2 id="2-2-初步使用webpack打包构建列表隔行变色案例"><a href="#2-2-初步使用webpack打包构建列表隔行变色案例" class="headerlink" title="2.2 初步使用webpack打包构建列表隔行变色案例"></a>2.2 初步使用webpack打包构建列表隔行变色案例</h2><ol>
<li><p>运行<code>npm init</code>初始化项目，使用npm管理项目中的依赖包</p>
</li>
<li><p>创建项目基本的目录结构，创建src(css、js、imgs)、dist文件夹和webpack.config.js文件</p>
</li>
<li><p>使用<code>npm i jquery --save</code>安装jquery类库</p>
</li>
<li><p> 在src根目录新建index.html，并书写页面和样式</p>
</li>
</ol>
   <figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br></pre></td><td class="code"><pre><span class="line"><span class="meta">&lt;!DOCTYPE <span class="keyword">html</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;<span class="name">html</span> <span class="attr">lang</span>=<span class="string">&quot;en&quot;</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;<span class="name">head</span>&gt;</span></span><br><span class="line">  <span class="tag">&lt;<span class="name">meta</span> <span class="attr">charset</span>=<span class="string">&quot;UTF-8&quot;</span>&gt;</span></span><br><span class="line">  <span class="tag">&lt;<span class="name">meta</span> <span class="attr">name</span>=<span class="string">&quot;viewport&quot;</span> <span class="attr">content</span>=<span class="string">&quot;width=device-width, initial-scale=1.0&quot;</span>&gt;</span></span><br><span class="line">  <span class="tag">&lt;<span class="name">meta</span> <span class="attr">http-equiv</span>=<span class="string">&quot;X-UA-Compatible&quot;</span> <span class="attr">content</span>=<span class="string">&quot;ie=edge&quot;</span>&gt;</span></span><br><span class="line">  <span class="tag">&lt;<span class="name">title</span>&gt;</span>Document<span class="tag">&lt;/<span class="name">title</span>&gt;</span></span><br><span class="line">  <span class="comment">&lt;!-- 注意： 不推荐直接在这里引用任何包和任何CSS文件 --&gt;</span></span><br><span class="line">  <span class="comment">&lt;!-- 因为 main 中的代码，涉及到了ES6的新语法，但是浏览器不识别 --&gt;</span></span><br><span class="line">  <span class="tag">&lt;<span class="name">script</span> <span class="attr">src</span>=<span class="string">&quot;./main.js&quot;</span>&gt;</span><span class="tag">&lt;/<span class="name">script</span>&gt;</span></span><br><span class="line">  <span class="comment">&lt;!-- 通过 webpack 这么一个前端构建工具， 把 main.js 做了一下处理，生成了一个 bundle.js 的文件 --&gt;</span></span><br><span class="line">  <span class="comment">&lt;!-- &lt;script src=&quot;../dist/bundle.js&quot;&gt;&lt;/script&gt; --&gt;</span></span><br><span class="line"><span class="tag">&lt;/<span class="name">head</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;<span class="name">body</span>&gt;</span></span><br><span class="line">  <span class="tag">&lt;<span class="name">ul</span>&gt;</span></span><br><span class="line">    <span class="tag">&lt;<span class="name">li</span>&gt;</span>这是第1个li<span class="tag">&lt;/<span class="name">li</span>&gt;</span></span><br><span class="line">    <span class="tag">&lt;<span class="name">li</span>&gt;</span>这是第2个li<span class="tag">&lt;/<span class="name">li</span>&gt;</span></span><br><span class="line">    <span class="tag">&lt;<span class="name">li</span>&gt;</span>这是第3个li<span class="tag">&lt;/<span class="name">li</span>&gt;</span></span><br><span class="line">    <span class="tag">&lt;<span class="name">li</span>&gt;</span>这是第4个li<span class="tag">&lt;/<span class="name">li</span>&gt;</span></span><br><span class="line">    <span class="tag">&lt;<span class="name">li</span>&gt;</span>这是第5个li<span class="tag">&lt;/<span class="name">li</span>&gt;</span></span><br><span class="line">    <span class="tag">&lt;<span class="name">li</span>&gt;</span>这是第6个li<span class="tag">&lt;/<span class="name">li</span>&gt;</span></span><br><span class="line">    <span class="tag">&lt;<span class="name">li</span>&gt;</span>这是第7个li<span class="tag">&lt;/<span class="name">li</span>&gt;</span></span><br><span class="line">    <span class="tag">&lt;<span class="name">li</span>&gt;</span>这是第8个li<span class="tag">&lt;/<span class="name">li</span>&gt;</span></span><br><span class="line">    <span class="tag">&lt;<span class="name">li</span>&gt;</span>这是第9个li<span class="tag">&lt;/<span class="name">li</span>&gt;</span></span><br><span class="line">    <span class="tag">&lt;<span class="name">li</span>&gt;</span>这是第10个li<span class="tag">&lt;/<span class="name">li</span>&gt;</span></span><br><span class="line">  <span class="tag">&lt;/<span class="name">ul</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;/<span class="name">body</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;/<span class="name">html</span>&gt;</span></span><br></pre></td></tr></table></figure>

<ol start="5">
<li><p>创建<code>main.js</code>并书写各行变色的代码逻辑：</p>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">// node.js可以这样处理依赖，这里也可以，因为webpack就是基于node的，node语法同样适用于webpack</span></span><br><span class="line"><span class="comment">// const $ = require(&#x27;jquery&#x27;) </span></span><br><span class="line"><span class="comment">// 导入jquery类库，说实话，这个导包方式和Python导包太像了,import *** from *** 是ES6中导入模块的方式</span></span><br><span class="line"><span class="comment">// 由于ES6的代码，太高级了，浏览器解析不了，所以，这一行执行会报错</span></span><br><span class="line"><span class="keyword">import</span> $ <span class="keyword">from</span> <span class="string">&#x27;jquery&#x27;</span> </span><br><span class="line"></span><br><span class="line">$(<span class="keyword">function</span> (<span class="params"></span>) &#123;</span><br><span class="line">    <span class="comment">// 去除li前面的原点</span></span><br><span class="line">    $(<span class="string">&#x27;li&#x27;</span>).<span class="title function_">css</span>(<span class="string">&#x27;list-style&#x27;</span>, <span class="string">&#x27;none&#x27;</span>)</span><br><span class="line">    <span class="comment">// 设置偶数行背景色，索引从0开始，0是偶数 </span></span><br><span class="line">    $(<span class="string">&#x27;li:odd&#x27;</span>).<span class="title function_">css</span>(<span class="string">&#x27;backgroundColor&#x27;</span>, <span class="string">&#x27;yellow&#x27;</span>)</span><br><span class="line">    <span class="comment">// 设置奇数行背景</span></span><br><span class="line">    $(<span class="string">&#x27;li:even&#x27;</span>).<span class="title function_">css</span>(<span class="string">&#x27;backgroundColor&#x27;</span>, <span class="keyword">function</span> (<span class="params"></span>) &#123;</span><br><span class="line">      <span class="keyword">return</span> <span class="string">&#x27;#&#x27;</span> + <span class="string">&#x27;D97634&#x27;</span>;</span><br><span class="line">    &#125;)</span><br><span class="line">&#125;)</span><br></pre></td></tr></table></figure></li>
<li><p>直接在页面上引用<code>main.js</code>会报错，因为浏览器不认识<code>import</code>这种高级的JS语法，需要使用webpack进行处理，webpack默认会把这种高级的语法转换为低级的浏览器能识别的语法；</p>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line"><span class="title class_">Uncaught</span> <span class="title class_">SyntaxError</span>: <span class="title class_">Cannot</span> use <span class="keyword">import</span> statement outside a <span class="variable language_">module</span></span><br></pre></td></tr></table></figure></li>
<li><p>运行<code>webpack 入口文件路径 输出文件路径</code>对<code>main.js</code>进行处理</p>
<p>这里注意一下版本，如果如果webpack4.x版本执行webpack3.x版本会报错误。</p>
<p>7.1 webpack 3.x版本执行下面命令</p>
<figure class="highlight shell"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">webpack src/js/main.js dist/bundle.js</span><br></pre></td></tr></table></figure>

<p>7.2 webpack 4.x版本执行下面命令</p>
<figure class="highlight shell"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">webpack src/js/main.js -o dist/bundle.js</span><br></pre></td></tr></table></figure></li>
<li><p>然后将index.html的./js/main.js换成转码后的js文件</p>
<figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line"><span class="tag">&lt;<span class="name">script</span> <span class="attr">src</span>=<span class="string">&quot;../dist/bundle.js&quot;</span>&gt;</span><span class="tag">&lt;/<span class="name">script</span>&gt;</span></span><br></pre></td></tr></table></figure></li>
</ol>
<p>经过上述示例，我们可以总结出，Webpack可以做什么事情？？？</p>
<ul>
<li>webpack 能够处理 JS 文件的互相依赖关系；</li>
<li>webpack 能够处理JS的兼容问题，把高级的浏览器不识别的语法，转为低级的浏览器能正常识别的语法</li>
<li>刚才运行的命令格式：  webpack 要打包的文件的路径 打包好的输出文件的路径</li>
</ul>
<h2 id="2-3-webpack配置文件后简化打包"><a href="#2-3-webpack配置文件后简化打包" class="headerlink" title="2.3 webpack配置文件后简化打包"></a>2.3 webpack配置文件后简化打包</h2><p>在上述示例中，我们每一次修改都要重复执行<code>webpack src/js/main.js -o dist/bundle.js</code>,这样显得很麻烦，影响我们的工作效率，于是查阅资料，找到webpack配置文件，配置后可以实现快速打包，不需要重复执行命令。</p>
<h3 id="2-3-1-webpack配置"><a href="#2-3-1-webpack配置" class="headerlink" title="2.3.1 webpack配置"></a>2.3.1 webpack配置</h3><ol>
<li>在项目根目录中创建<code>webpack.config.js</code></li>
<li>由于运行webpack命令的时候，webpack需要指定入口文件和输出文件的路径，所以，我们需要在<code>webpack.config.js</code>中配置这两个路径：<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br></pre></td><td class="code"><pre><span class="line"> <span class="comment">// 导入处理路径的模块</span></span><br><span class="line"> <span class="keyword">var</span> path = <span class="built_in">require</span>(<span class="string">&#x27;path&#x27;</span>);</span><br><span class="line"></span><br><span class="line"> <span class="comment">// 导出一个配置对象，将来webpack在启动的时候，会默认来查找webpack.config.js，并读取这个文件中导出的配置对象，来进行打包处理</span></span><br><span class="line"><span class="comment">// 这个配置，起始就是一个JS文件，通过 Node 中的模块操作，向外暴露了一个配置对象</span></span><br><span class="line"> <span class="variable language_">module</span>.<span class="property">exports</span> = &#123;</span><br><span class="line">     <span class="attr">entry</span>: path.<span class="title function_">resolve</span>(__dirname, <span class="string">&#x27;src/js/main.js&#x27;</span>), <span class="comment">//入口，表示，要使用 webpack 打包哪个文件</span></span><br><span class="line">     <span class="attr">output</span>: &#123; <span class="comment">// 配置输出选项</span></span><br><span class="line">         <span class="attr">path</span>: path.<span class="title function_">resolve</span>(__dirname, <span class="string">&#x27;dist&#x27;</span>), <span class="comment">// 配置输出的路径，指定 打包好的文件，输出到哪个目录中去</span></span><br><span class="line">         <span class="attr">filename</span>: <span class="string">&#x27;bundle.js&#x27;</span> <span class="comment">// 配置输出的文件名</span></span><br><span class="line">     &#125;</span><br><span class="line"> &#125;</span><br></pre></td></tr></table></figure></li>
</ol>
<h3 id="2-3-2-实现webpack的实时打包构建"><a href="#2-3-2-实现webpack的实时打包构建" class="headerlink" title="2.3.2 实现webpack的实时打包构建"></a>2.3.2 实现webpack的实时打包构建</h3><ol>
<li>由于每次重新修改代码之后，都需要手动运行webpack打包的命令，比较麻烦，所以使用<code>webpack-dev-server</code>来实现代码实时打包编译，当修改代码之后，会自动进行打包构建。</li>
<li>运行<code>npm i webpack-dev-server -D</code>安装到开发依赖</li>
<li>安装完成之后，在命令行直接运行<code>webpack-dev-server</code>来进行打包，发现报错，此时需要借助于<code>package.json</code>文件中的指令，来进行运行<code>webpack-dev-server</code>命令，在<code>scripts</code>节点下新增<code>&quot;dev&quot;: &quot;webpack-dev-server&quot;</code>指令，发现可以进行实时打包，但是dist目录下并没有生成<code>bundle.js</code>文件，这是因为<code>webpack-dev-server</code>将打包好的文件放在了内存中</li>
</ol>
<ul>
<li>把<code>bundle.js</code>放在内存中的好处是：由于需要实时打包编译，所以放在内存中速度会非常快</li>
<li>这个时候访问webpack-dev-server启动的<code>http://localhost:8080/</code>网站，发现是一个文件夹的面板，需要点击到src目录下，才能打开我们的index首页，此时引用不到bundle.js文件，需要修改index.html中script的src属性为:<code>&lt;script src=&quot;../bundle.js&quot;&gt;&lt;/script&gt;</code></li>
<li>为了能在访问<code>http://localhost:8080/</code>的时候直接访问到index首页，可以使用<code>--contentBase src</code>指令来修改dev指令，指定启动的根目录：<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line"><span class="string">&quot;dev&quot;</span>: <span class="string">&quot;webpack-dev-server --contentBase src&quot;</span></span><br></pre></td></tr></table></figure>
同时修改index页面中script的src属性为<code>&lt;script src=&quot;bundle.js&quot;&gt;&lt;/script&gt;</code>或<code>&lt;script src=&quot;/bundle.js&quot;&gt;&lt;/script&gt;</code></li>
</ul>
<h2 id="2-4-使用html-webpack-plugin插件配置启动页面"><a href="#2-4-使用html-webpack-plugin插件配置启动页面" class="headerlink" title="2.4 使用html-webpack-plugin插件配置启动页面"></a>2.4 使用<code>html-webpack-plugin</code>插件配置启动页面</h2><p>由于使用<code>--contentBase</code>指令的过程比较繁琐，需要指定启动的目录，同时还需要修改index.html中script标签的src属性，所以推荐大家使用<code>html-webpack-plugin</code>插件配置启动页面.</p>
<ol>
<li>运行<code>cnpm i html-webpack-plugin --save-dev</code>安装到开发依赖</li>
<li>修改<code>webpack.config.js</code>配置文件如下：<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">// 导入处理路径的模块</span></span><br><span class="line"><span class="keyword">var</span> path = <span class="built_in">require</span>(<span class="string">&#x27;path&#x27;</span>);</span><br><span class="line"><span class="comment">// 导入自动生成HTMl文件的插件</span></span><br><span class="line"><span class="comment">// 导入在内存中生成 HTML 页面的 插件</span></span><br><span class="line"><span class="comment">// 只要是插件，都一定要 放到 plugins 节点中去</span></span><br><span class="line"><span class="comment">// 这个插件的两个作用：</span></span><br><span class="line"><span class="comment">//  1. 自动在内存中根据指定页面生成一个内存的页面</span></span><br><span class="line"><span class="comment">//  2. 自动，把打包好的 bundle.js 追加到页面中去</span></span><br><span class="line"><span class="keyword">var</span> htmlWebpackPlugin = <span class="built_in">require</span>(<span class="string">&#x27;html-webpack-plugin&#x27;</span>);</span><br><span class="line"><span class="variable language_">module</span>.<span class="property">exports</span> = &#123;</span><br><span class="line">    <span class="attr">entry</span>: path.<span class="title function_">resolve</span>(__dirname, <span class="string">&#x27;src/js/main.js&#x27;</span>), <span class="comment">// 项目入口文件</span></span><br><span class="line">    <span class="attr">output</span>: &#123; <span class="comment">// 配置输出选项</span></span><br><span class="line">        <span class="attr">path</span>: path.<span class="title function_">resolve</span>(__dirname, <span class="string">&#x27;dist&#x27;</span>), <span class="comment">// 配置输出的路径</span></span><br><span class="line">        <span class="attr">filename</span>: <span class="string">&#x27;bundle.js&#x27;</span> <span class="comment">// 配置输出的文件名</span></span><br><span class="line">    &#125;,</span><br><span class="line">    <span class="comment">// 添加plugins节点配置插件</span></span><br><span class="line">    <span class="attr">plugins</span>:[ </span><br><span class="line">        <span class="comment">// 创建一个 在内存中 生成 HTML页面的插件</span></span><br><span class="line">        <span class="keyword">new</span> <span class="title function_">htmlWebpackPlugin</span>(&#123;  </span><br><span class="line">            <span class="comment">// 指定 模板页面，将来会根据指定的页面路径，去生成内存中的 页面</span></span><br><span class="line">            <span class="attr">template</span>:path.<span class="title function_">resolve</span>(__dirname, <span class="string">&#x27;src/index.html&#x27;</span>),</span><br><span class="line">             <span class="comment">//自动生成的HTML文件的名称</span></span><br><span class="line">            <span class="attr">filename</span>:<span class="string">&#x27;index.html&#x27;</span></span><br><span class="line">           </span><br><span class="line">        &#125;)</span><br><span class="line">    ]</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure></li>
<li>修改<code>package.json</code>中<code>script</code>节点中的dev指令如下：<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line"><span class="string">&quot;dev&quot;</span>: <span class="string">&quot;webpack-dev-server&quot;</span></span><br></pre></td></tr></table></figure></li>
<li>将index.html中script标签注释掉，因为<code>html-webpack-plugin</code>插件会自动把bundle.js注入到index.html页面中！</li>
</ol>
<h2 id="2-5-实现自动打开浏览器、热更新和配置浏览器的默认端口号"><a href="#2-5-实现自动打开浏览器、热更新和配置浏览器的默认端口号" class="headerlink" title="2.5 实现自动打开浏览器、热更新和配置浏览器的默认端口号"></a>2.5 实现自动打开浏览器、热更新和配置浏览器的默认端口号</h2><p><strong>注意：热更新在JS中表现的不明显，可以从一会儿要讲到的CSS身上进行介绍说明！</strong></p>
<h3 id="2-5-1-方式1"><a href="#2-5-1-方式1" class="headerlink" title="2.5.1 方式1"></a>2.5.1 方式1</h3><ul>
<li>修改<code>package.json</code>的script节点如下，其中<code>--open</code>表示自动打开浏览器，<code>--port 4321</code>表示打开的端口号为4321，<code>--hot</code>表示启用浏览器热更新：<figure class="highlight json"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line"><span class="attr">&quot;dev&quot;</span><span class="punctuation">:</span> <span class="string">&quot;webpack-dev-server --hot --port 4321 --open&quot;</span></span><br></pre></td></tr></table></figure></li>
</ul>
<h3 id="2-5-2-方式2"><a href="#2-5-2-方式2" class="headerlink" title="2.5.2 方式2"></a>2.5.2 方式2</h3><ol>
<li>修改<code>webpack.config.js</code>文件，新增<code>devServer</code>节点如下：<figure class="highlight json"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br></pre></td><td class="code"><pre><span class="line">devServer<span class="punctuation">:</span><span class="punctuation">&#123;</span></span><br><span class="line">        hot<span class="punctuation">:</span><span class="literal"><span class="keyword">true</span></span><span class="punctuation">,</span> <span class="comment">// 启用热更新 的 第1步</span></span><br><span class="line">        open<span class="punctuation">:</span><span class="literal"><span class="keyword">true</span></span><span class="punctuation">,</span> <span class="comment">// 自动打开浏览器</span></span><br><span class="line">        contentBase<span class="punctuation">:</span> &#x27;src&#x27;<span class="punctuation">,</span> <span class="comment">// 指定托管的根目录</span></span><br><span class="line">        port<span class="punctuation">:</span><span class="number">4321</span> <span class="comment">// 设置启动时候的运行端口</span></span><br><span class="line">    <span class="punctuation">&#125;</span></span><br></pre></td></tr></table></figure></li>
<li>在头部引入<code>webpack</code>模块：<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">var</span> webpack = <span class="built_in">require</span>(<span class="string">&#x27;webpack&#x27;</span>); <span class="comment">// 启用热更新的 第2步</span></span><br></pre></td></tr></table></figure></li>
<li>在<code>plugins</code>节点下新增：<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">new</span> webpack.<span class="title class_">HotModuleReplacementPlugin</span>() <span class="comment">// new 一个热更新的 模块对象， 这是 启用热更新的第 3 步</span></span><br></pre></td></tr></table></figure></li>
</ol>
<h2 id="2-6-使用webpack打包css文件"><a href="#2-6-使用webpack打包css文件" class="headerlink" title="2.6 使用webpack打包css文件"></a>2.6 使用webpack打包css文件</h2><ol>
<li>运行<code>cnpm i style-loader css-loader --save-dev</code></li>
<li>修改<code>webpack.config.js</code>这个配置文件：<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br></pre></td><td class="code"><pre><span class="line"><span class="attr">module</span>: &#123; <span class="comment">// 这个节点，用于配置 所有 第三方模块 加载器 </span></span><br><span class="line">    <span class="attr">rules</span>: [ <span class="comment">// 所有第三方模块的 匹配规则</span></span><br><span class="line">      &#123; <span class="attr">test</span>: <span class="regexp">/\.css$/</span>, <span class="attr">use</span>: [<span class="string">&#x27;style-loader&#x27;</span>, <span class="string">&#x27;css-loader&#x27;</span>] &#125; <span class="comment">//  配置处理 .css 文件的第三方loader 规则</span></span><br><span class="line">    ]</span><br><span class="line">  &#125;</span><br></pre></td></tr></table></figure></li>
<li>注意：<code>use</code>表示使用哪些模块来处理<code>test</code>所匹配到的文件；<code>use</code>中相关loader模块的调用顺序是从后向前调用的；</li>
</ol>
<h2 id="2-7-使用webpack打包less文件"><a href="#2-7-使用webpack打包less文件" class="headerlink" title="2.7 使用webpack打包less文件"></a>2.7 使用webpack打包less文件</h2><ol>
<li>运行<code>cnpm i less-loader less -D</code></li>
<li>修改<code>webpack.config.js</code>这个配置文件：<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">&#123; <span class="attr">test</span>: <span class="regexp">/\.less$/</span>, <span class="attr">use</span>: [<span class="string">&#x27;style-loader&#x27;</span>, <span class="string">&#x27;css-loader&#x27;</span>, <span class="string">&#x27;less-loader&#x27;</span>] &#125;, <span class="comment">//配置处理 .less 文件的第三方 loader 规则</span></span><br></pre></td></tr></table></figure></li>
</ol>
<h2 id="2-8-使用webpack打包sass文件"><a href="#2-8-使用webpack打包sass文件" class="headerlink" title="2.8 使用webpack打包sass文件"></a>2.8 使用webpack打包sass文件</h2><ol>
<li>运行<code>cnpm i sass-loader node-sass --save-dev</code></li>
<li>在<code>webpack.config.js</code>中添加处理sass文件的loader模块：<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">&#123; <span class="attr">test</span>: <span class="regexp">/\.scss$/</span>, <span class="attr">use</span>: [<span class="string">&#x27;style-loader&#x27;</span>, <span class="string">&#x27;css-loader&#x27;</span>, <span class="string">&#x27;sass-loader&#x27;</span>] &#125;, <span class="comment">// 配置处理 .scss 文件的 第三方 loader 规则</span></span><br></pre></td></tr></table></figure></li>
</ol>
<h2 id="2-9-使用webpack处理css中的路径"><a href="#2-9-使用webpack处理css中的路径" class="headerlink" title="2.9 使用webpack处理css中的路径"></a>2.9 使用webpack处理css中的路径</h2><ol>
<li>运行<code>cnpm i url-loader file-loader --save-dev</code></li>
<li>在<code>webpack.config.js</code>中添加处理url路径的loader模块：<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">&#123; <span class="attr">test</span>: <span class="regexp">/\.(png|jpg|gif)$/</span>, <span class="attr">use</span>: <span class="string">&#x27;url-loader&#x27;</span> &#125;</span><br></pre></td></tr></table></figure></li>
<li>可以通过<code>limit</code>指定进行base64编码的图片大小；只有小于指定字节（byte）的图片才会进行base64编码：<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">&#123; <span class="attr">test</span>: <span class="regexp">/\.(png|jpg|gif)$/</span>, <span class="attr">use</span>: <span class="string">&#x27;url-loader?limit=43960&#x27;</span> &#125;,</span><br></pre></td></tr></table></figure></li>
</ol>
<h2 id="2-10-使用babel处理高级JS语法"><a href="#2-10-使用babel处理高级JS语法" class="headerlink" title="2.10 使用babel处理高级JS语法"></a>2.10 使用babel处理高级JS语法</h2><ol>
<li>运行<code>cnpm i babel-core babel-loader babel-plugin-transform-runtime --save-dev</code>安装babel的相关loader包</li>
<li>运行<code>cnpm i babel-preset-es2015 babel-preset-stage-0 --save-dev</code>安装babel转换的语法</li>
<li>在<code>webpack.config.js</code>中添加相关loader模块，其中需要注意的是，一定要把<code>node_modules</code>文件夹添加到排除项：<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">&#123; <span class="attr">test</span>: <span class="regexp">/\.js$/</span>, <span class="attr">use</span>: <span class="string">&#x27;babel-loader&#x27;</span>, <span class="attr">exclude</span>: <span class="regexp">/node_modules/</span> &#125;</span><br></pre></td></tr></table></figure></li>
<li>在项目根目录中添加<code>.babelrc</code>文件，并修改这个配置文件如下：<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br></pre></td><td class="code"><pre><span class="line">&#123;</span><br><span class="line">    <span class="string">&quot;presets&quot;</span>:[<span class="string">&quot;es2015&quot;</span>, <span class="string">&quot;stage-0&quot;</span>],</span><br><span class="line">    <span class="string">&quot;plugins&quot;</span>:[<span class="string">&quot;transform-runtime&quot;</span>]</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure></li>
<li><strong>注意：语法插件<code>babel-preset-es2015</code>可以更新为<code>babel-preset-env</code>，它包含了所有的ES相关的语法；</strong></li>
</ol>
<h2 id="2-11-webpack-处理第三方文件类型的过程"><a href="#2-11-webpack-处理第三方文件类型的过程" class="headerlink" title="2.11 webpack 处理第三方文件类型的过程"></a>2.11 webpack 处理第三方文件类型的过程</h2><ol>
<li>发现这个 要处理的文件不是JS文件，然后就去 配置文件中，查找有没有对应的第三方 loader 规则</li>
<li>如果能找到对应的规则， 就会调用 对应的 loader 处理 这种文件类型；</li>
<li>在调用loader 的时候，是从后往前调用的；</li>
<li>当最后的一个 loader 调用完毕，会把 处理的结果，直接交给 webpack 进行 打包合并，最终输出到  bundle.js 中去</li>
</ol>
<h2 id="2-12-webpack总结"><a href="#2-12-webpack总结" class="headerlink" title="2.12 webpack总结"></a>2.12 webpack总结</h2><p>当我们在 控制台，直接输入 webpack 命令执行的时候，webpack 做了以下几步：</p>
<ol>
<li>首先，webpack 发现，我们并没有通过命令的形式，给它指定入口和出口</li>
<li>webpack 就会去 项目的 根目录中，查找一个叫做 <code>webpack.config.js</code> 的配置文件</li>
<li>当找到配置文件后，webpack 会去解析执行这个 配置文件，当解析执行完配置文件后，就得到了 配置文件中，导出的配置对象</li>
<li>当 webpack 拿到 配置对象后，就拿到了 配置对象中，指定的 入口 和 出口，然后进行打包构建；</li>
</ol>
<h1 id="3-npm扩展之nrm"><a href="#3-npm扩展之nrm" class="headerlink" title="3. npm扩展之nrm"></a>3. npm扩展之nrm</h1><h2 id="3-1-npm默认依赖下载地址"><a href="#3-1-npm默认依赖下载地址" class="headerlink" title="3.1 npm默认依赖下载地址"></a>3.1 npm默认依赖下载地址</h2><p>在Java技术栈中，Maven默认会从<a target="_blank" rel="noopener" href="http://repo1.maven.org/maven2/%E8%BF%99%E4%B8%AA%E4%B8%AD%E5%A4%AE%E4%BB%93%E5%BA%93%E4%B8%8B%E8%BD%BD%E4%BE%9D%E8%B5%96%E3%80%82">http://repo1.maven.org/maven2/这个中央仓库下载依赖。</a></p>
<p>那么在前端的npm中，默认也有一个默认的下载相关依赖的地址，那就是registry.npmjs.org。</p>
<p>Maven中我们觉得中央仓库慢，可以切换为阿里云的Maven中央仓库。同样，npm也可以采用类似的nrm方式进行切换，方便我们快速下载相关依赖。</p>
<h2 id="3-2-nrm使用"><a href="#3-2-nrm使用" class="headerlink" title="3.2 nrm使用"></a>3.2 nrm使用</h2><p>作用：提供了一些最常用的NPM包镜像地址，能够让我们快速的切换安装包时候的服务器地址；<br>什么是镜像：原来包刚一开始是只存在于国外的NPM服务器，但是由于网络原因，经常访问不到，这时候，我们可以在国内，创建一个和官网完全一样的NPM服务器，只不过，数据都是从人家那里拿过来的，除此之外，使用方式完全一样；</p>
<ol>
<li><p>运行<code>npm i nrm -g</code>全局安装<code>nrm</code>包；</p>
</li>
<li><p>使用<code>nrm ls</code>查看当前所有可用的镜像源地址以及当前所使用的镜像源地址；</p>
<figure class="highlight shell"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br></pre></td><td class="code"><pre><span class="line">E:\js&gt;nrm ls</span><br><span class="line">* npm -------- https://registry.npmjs.org/ # 星号代表当前使用的地址</span><br><span class="line">  yarn ------- https://registry.yarnpkg.com/</span><br><span class="line">  cnpm ------- http://r.cnpmjs.org/</span><br><span class="line">  taobao ----- https://registry.npm.taobao.org/</span><br><span class="line">  nj --------- https://registry.nodejitsu.com/</span><br><span class="line">  npmMirror -- https://skimdb.npmjs.com/registry/</span><br><span class="line">  edunpm ----- http://registry.enpmjs.org/</span><br></pre></td></tr></table></figure></li>
<li><p>使用<code>nrm use npm</code>或<code>nrm use taobao</code>切换不同的镜像源地址；</p>
<figure class="highlight shell"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br></pre></td><td class="code"><pre><span class="line">E:\js&gt;nrm use cnpm</span><br><span class="line">   Registry has been set to: http://r.cnpmjs.org/</span><br><span class="line">E:\js&gt;nrm ls</span><br><span class="line">  npm -------- https://registry.npmjs.org/</span><br><span class="line">  yarn ------- https://registry.yarnpkg.com/</span><br><span class="line">* cnpm ------- http://r.cnpmjs.org/  # 已经切换到cnpm镜像地址，若安装了cnpm, 可直接通过cnpm命令安装依赖，若没安装，也可以用npm安装，它也是从这个地址下载的</span><br><span class="line">  taobao ----- https://registry.npm.taobao.org/</span><br><span class="line">  nj --------- https://registry.nodejitsu.com/</span><br><span class="line">  npmMirror -- https://skimdb.npmjs.com/registry/</span><br><span class="line">  edunpm ----- http://registry.enpmjs.org/</span><br><span class="line"></span><br></pre></td></tr></table></figure></li>
</ol>
<blockquote>
<p>注意： nrm 只是单纯的提供了几个常用的 下载包的 URL地址，并能够让我们在 这几个 地址之间，很方便的进行切换，但是，我们每次装包的时候，使用的 装包工具，都是  npm</p>
</blockquote>
<ol start="4">
<li><p>查看当前npm源</p>
<figure class="highlight shell"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br></pre></td><td class="code"><pre><span class="line">E:\js&gt;npm config get registry</span><br><span class="line">http://r.cnpmjs.org/</span><br></pre></td></tr></table></figure></li>
</ol>
<h1 id="4-webpack中使用Vue"><a href="#4-webpack中使用Vue" class="headerlink" title="4.webpack中使用Vue"></a>4.webpack中使用Vue</h1><h2 id="4-1-安装Vue依赖"><a href="#4-1-安装Vue依赖" class="headerlink" title="4.1 安装Vue依赖"></a>4.1 安装Vue依赖</h2><ul>
<li><p>安装vue依赖<code>cnpm i vue -D</code></p>
</li>
<li><p>编写基本的vue代码</p>
<ol>
<li>index.html代码</li>
</ol>
</li>
</ul>
<pre><code> <figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br></pre></td><td class="code"><pre><span class="line"><span class="tag">&lt;<span class="name">body</span>&gt;</span></span><br><span class="line">    <span class="tag">&lt;<span class="name">h1</span> <span class="attr">id</span>=<span class="string">&quot;app&quot;</span>&gt;</span>&#123;&#123;msg&#125;&#125;<span class="tag">&lt;/<span class="name">h1</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;/<span class="name">body</span>&gt;</span></span><br></pre></td></tr></table></figure>
 
</code></pre>
<ol start="2">
<li><p>main.js代码</p>
<figure class="highlight javascript"><figcaption><span>fcitx-sunpinyin 或 fcitx-googlepinyin 或 fcitx-pinyin</span></figcaption><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br><span class="line">32</span><br><span class="line">33</span><br><span class="line">34</span><br><span class="line">35</span><br><span class="line">36</span><br><span class="line">37</span><br><span class="line">38</span><br><span class="line">39</span><br><span class="line">40</span><br><span class="line">41</span><br><span class="line">42</span><br><span class="line">43</span><br><span class="line">44</span><br><span class="line">45</span><br><span class="line">46</span><br><span class="line">47</span><br><span class="line">48</span><br><span class="line">49</span><br><span class="line">50</span><br><span class="line">51</span><br><span class="line">52</span><br><span class="line">53</span><br></pre></td><td class="code"><pre><span class="line">     <span class="comment">// 导入vue模块</span></span><br><span class="line">     <span class="keyword">import</span> <span class="title class_">Vue</span> <span class="keyword">from</span> <span class="string">&#x27;vue&#x27;</span></span><br><span class="line">     <span class="comment">// 创建一个vue实例</span></span><br><span class="line">     <span class="keyword">var</span> vm = <span class="keyword">new</span> <span class="title class_">Vue</span>(&#123;</span><br><span class="line">         <span class="attr">el</span>: <span class="string">&quot;#app&quot;</span>,</span><br><span class="line">         <span class="attr">data</span>: &#123;</span><br><span class="line">             <span class="attr">msg</span>: <span class="string">&quot;hello&quot;</span></span><br><span class="line">         &#125;</span><br><span class="line">    </span><br><span class="line"> </span><br><span class="line">     </span><br><span class="line"></span><br><span class="line">- 运行<span class="string">`npm run dev`</span>，测试是否运行成功</span><br><span class="line"></span><br><span class="line">  运行后，我们发现，浏览器并没有显示出msg的数据，我们打开控制台可以看到如下报错：</span><br><span class="line"></span><br><span class="line">  &gt; vue.<span class="property">runtime</span>.<span class="property">esm</span>.<span class="property">js</span>:<span class="number">620</span> [<span class="title class_">Vue</span> warn]: <span class="title class_">You</span> are using the runtime-only build <span class="keyword">of</span> <span class="title class_">Vue</span> where the template compiler is not available. <span class="title class_">Either</span> pre-compile the templates into render functions, or use the compiler-included build.</span><br><span class="line">  &gt;</span><br><span class="line">  &gt; (found <span class="keyword">in</span> &lt;<span class="title class_">Root</span>&gt;)</span><br><span class="line"></span><br><span class="line">大概的意思是：你使用了 runtime-only的依赖，导致模板编译不可用。</span><br><span class="line"></span><br><span class="line">回顾包的查找规则：</span><br><span class="line"></span><br><span class="line"><span class="number">1.</span> 找 项目根目录中有没有 node_modules 的文件夹</span><br><span class="line"><span class="number">2.</span> 在 node_modules 中 根据包名，找对应的 vue 文件夹</span><br><span class="line"><span class="number">3.</span> 在 vue 文件夹中，找 一个叫做 package.<span class="property">json</span> 的包配置文件</span><br><span class="line"><span class="number">4.</span> 在 package.<span class="property">json</span> 文件中，查找 一个 main 属性【main属性指定了这个包在被加载时候，的入口文件】</span><br><span class="line"></span><br><span class="line">经过查询vue包的配置，我们最终找出vue.<span class="property">runtime</span>.<span class="property">common</span>.<span class="property">js</span>这个文件，其实这个文件是阉割版本的vue，功能不全，所以上述代码在浏览器执行错误。</span><br><span class="line"></span><br><span class="line">注意：在网页通过script标签引入的是完整功能的vue依赖。</span><br><span class="line"></span><br><span class="line">- 解决方式</span><br><span class="line"></span><br><span class="line">  <span class="number">1.</span> 方式一（不推荐）</span><br><span class="line"></span><br><span class="line">     将node_modules的vue包下package.<span class="property">json</span>中main属性的内容改为vue.<span class="property">js</span>即可</span><br><span class="line"></span><br><span class="line">  <span class="number">2.</span> 方式二（不推荐）</span><br><span class="line"></span><br><span class="line">     在js文件中导入功能全的vue依赖。即将<span class="string">`import Vue from &#x27;vue&#x27;`</span>改为<span class="string">`import Vue from &#x27;../../node_modules/vue/dist/vue.js&#x27;`</span></span><br><span class="line"></span><br><span class="line">  <span class="number">3.</span> 方式三（推荐）     </span><br><span class="line"></span><br><span class="line">     在webpack.<span class="property">config</span>.<span class="property">js</span>文件添加节点即可。</span><br><span class="line"></span><br><span class="line">     <span class="string">``</span><span class="string">`javascript</span></span><br><span class="line"><span class="string">       resolve: &#123;</span></span><br><span class="line"><span class="string">         alias: &#123; // 修改 Vue 被导入时候的包的路径</span></span><br><span class="line"><span class="string">           &quot;vue$&quot;: &quot;vue/dist/vue.js&quot;</span></span><br><span class="line"><span class="string">         &#125;</span></span><br><span class="line"><span class="string">       &#125;</span></span><br></pre></td></tr></table></figure></li>
</ol>
<h2 id="4-2-配置vue单页面文件"><a href="#4-2-配置vue单页面文件" class="headerlink" title="4.2 配置vue单页面文件"></a>4.2 配置vue单页面文件</h2><ol>
<li><p>运行<code>cnpm i vue -S</code>将vue安装为运行依赖；</p>
</li>
<li><p>运行<code>cnpm i vue-loader vue-template-compiler -D</code>将解析转换vue的包安装为开发依赖；</p>
</li>
<li><p>运行<code>cnpm i style-loader css-loader -D</code>将解析转换CSS的包安装为开发依赖，因为.vue文件中会写CSS样式；</p>
</li>
<li><p>在<code>webpack.config.js</code>中，添加如下<code>module</code>规则：</p>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br></pre></td><td class="code"><pre><span class="line"><span class="attr">module</span>: &#123;</span><br><span class="line">    <span class="attr">rules</span>: [</span><br><span class="line">        &#123; <span class="attr">test</span>: <span class="regexp">/\.css$/</span>, <span class="attr">use</span>: [<span class="string">&#x27;style-loader&#x27;</span>, <span class="string">&#x27;css-loader&#x27;</span>] &#125;,</span><br><span class="line">        &#123; <span class="attr">test</span>: <span class="regexp">/\.vue$/</span>, <span class="attr">use</span>: <span class="string">&#x27;vue-loader&#x27;</span> &#125;</span><br><span class="line">    ]</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure></li>
</ol>
<p>注意：如果安装vue-loader@15+的版本，需要配置<em>vueloaderplugin</em>，在webpack.config.js文件进行如下配置：</p>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">const</span> <span class="title class_">VueLoaderPlugin</span> = <span class="built_in">require</span>(<span class="string">&#x27;vue-loader/lib/plugin&#x27;</span>);</span><br><span class="line"><span class="attr">plugins</span>: [ <span class="comment">// 插件配置</span></span><br><span class="line">  <span class="keyword">new</span> <span class="title class_">VueLoaderPlugin</span>() <span class="comment">//增加VueLoaderPlugin</span></span><br><span class="line">]</span><br></pre></td></tr></table></figure>



<h2 id="4-3-webpack环境渲染-vue文件"><a href="#4-3-webpack环境渲染-vue文件" class="headerlink" title="4.3 webpack环境渲染.vue文件"></a>4.3 webpack环境渲染.vue文件</h2><ol>
<li>在src/components目录下新建login.vue文件</li>
</ol>
<figure class="highlight plaintext"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br></pre></td><td class="code"><pre><span class="line">&lt;template&gt;</span><br><span class="line">	&lt;div&gt;</span><br><span class="line">    	&lt;h1&gt;这是登录组件，使用 .vue 文件定义出来的 --- &#123;&#123;msg&#125;&#125;&lt;/h1&gt;</span><br><span class="line">    &lt;/div&gt;</span><br><span class="line">&lt;/template&gt;</span><br><span class="line"></span><br><span class="line">&lt;script&gt;</span><br><span class="line">    export default &#123;</span><br><span class="line">        data() &#123;</span><br><span class="line">            // 注意：组件中的 data 必须是 function</span><br><span class="line">            return &#123;</span><br><span class="line">                msg: &quot;123&quot;</span><br><span class="line">            &#125;;</span><br><span class="line">        &#125;,</span><br><span class="line">        methods: &#123;</span><br><span class="line">            show() &#123;</span><br><span class="line">                console.log(&quot;调用了 login.vue 中的 show 方法&quot;);</span><br><span class="line">            &#125;</span><br><span class="line">        &#125;</span><br><span class="line">    &#125;;</span><br><span class="line">&lt;/script&gt;</span><br><span class="line"></span><br><span class="line">&lt;style&gt;</span><br><span class="line">&lt;/style&gt;</span><br></pre></td></tr></table></figure>



<h2 id="4-4-vue官方脚手架"><a href="#4-4-vue官方脚手架" class="headerlink" title="4.4 vue官方脚手架"></a>4.4 vue官方脚手架</h2><h3 id="4-4-1-什么是vue脚手架"><a href="#4-4-1-什么是vue脚手架" class="headerlink" title="4.4.1 什么是vue脚手架"></a>4.4.1 什么是vue脚手架</h3><p>vue脚手架用于快速生成vue项目基础架构，让开发人员只关注于业务代码编写，不用关系过多的项目配置。其官网地址为<a target="_blank" rel="noopener" href="https://cli.vuejs.org/zh/%E3%80%82">https://cli.vuejs.org/zh/。</a></p>
<p>不难发现，这和我们Java后端Spring initial初始化Spring Boot项目类似。</p>
<h3 id="4-4-2-vue-cli3-x-安装和使用"><a href="#4-4-2-vue-cli3-x-安装和使用" class="headerlink" title="4.4.2 vue-cli3.x+安装和使用"></a>4.4.2 vue-cli3.x+安装和使用</h3><figure class="highlight bash"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br></pre></td><td class="code"><pre><span class="line">litong@LT:/media/litong/文档/code/JavaScript/vue$ npm install -g @vue/cli</span><br><span class="line">litong@LT:/media/litong/文档/code/JavaScript/vue$ vue -V</span><br><span class="line">@vue/cli 4.2.3</span><br></pre></td></tr></table></figure>

<figure class="highlight bash"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">litong@LT:/media/litong/文档/code/JavaScript/vue$ vue create demo-vue</span><br></pre></td></tr></table></figure>

<figure class="highlight bash"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">litong@LT:/media/litong/文档/code/JavaScript/vue$ vue ui</span><br></pre></td></tr></table></figure>

<h3 id="4-4-3-vue-cli2-x安装和使用"><a href="#4-4-3-vue-cli2-x安装和使用" class="headerlink" title="4.4.3 vue-cli2.x安装和使用"></a>4.4.3 vue-cli2.x安装和使用</h3><figure class="highlight bash"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br></pre></td><td class="code"><pre><span class="line">litong@LT:/media/litong/文档/code/JavaScript/vue$ npm install -g @vue/cli-init</span><br><span class="line">litong@LT:/media/litong/文档/code/JavaScript/vue$ vue init webpack demo-vue</span><br></pre></td></tr></table></figure>

<h3 id="4-4-5-vue脚手架项目结构分析"><a href="#4-4-5-vue脚手架项目结构分析" class="headerlink" title="4.4.5 vue脚手架项目结构分析"></a>4.4.5 vue脚手架项目结构分析</h3><figure class="highlight bash"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br></pre></td><td class="code"><pre><span class="line">litong@LT:/media/litong/文档/code/JavaScript/vue/vue-project$ tree  -L 2 </span><br><span class="line">. </span><br><span class="line">├── babel.config.js  <span class="comment"># babel配置</span></span><br><span class="line">├── node_modules     <span class="comment"># 依赖包目录</span></span><br><span class="line">│   ├── vue-loader</span><br><span class="line">│   ├── vue-router</span><br><span class="line">│   ├── vue-style-loader</span><br><span class="line">│   ├── vue-template-compiler</span><br><span class="line">│   ├── vue-template-es2015-compiler</span><br><span class="line">│   ├── vuex</span><br><span class="line">├── package.json      <span class="comment"># 依赖管理文件</span></span><br><span class="line">├── package-lock.json <span class="comment"># 依赖包锁文件，锁定版本</span></span><br><span class="line">├── public            <span class="comment"># 静态资源目录</span></span><br><span class="line">│   ├── favicon.ico   <span class="comment"># 图片文件</span></span><br><span class="line">│   └── index.html    <span class="comment"># html文件</span></span><br><span class="line">├── README.md         <span class="comment"># Git的README文件</span></span><br><span class="line">└── src               <span class="comment"># 项目源文件</span></span><br><span class="line">    ├── App.vue       <span class="comment"># 根组件</span></span><br><span class="line">    ├── assets        <span class="comment"># 可变动的静态文件，参与编译，会被webpack解析处理，只支持相对路径</span></span><br><span class="line">    ├── components    <span class="comment"># 组件目录</span></span><br><span class="line">    ├── main.js       <span class="comment"># 入口js执行文件</span></span><br><span class="line">    ├── router        <span class="comment"># vue-router相关文件</span></span><br><span class="line">    ├── store         <span class="comment"># Vuex store</span></span><br><span class="line">    └── views         <span class="comment"># 视图组件，存放可共用的组件</span></span><br></pre></td></tr></table></figure>

<h1 id="5-相关文章"><a href="#5-相关文章" class="headerlink" title="5. 相关文章"></a>5. 相关文章</h1><ul>
<li><a target="_blank" rel="noopener" href="http://webpack.github.io/">webpack官网</a></li>
<li><a target="_blank" rel="noopener" href="https://www.webpackjs.com/">webpack中文网</a></li>
<li><a target="_blank" rel="noopener" href="https://segmentfault.com/p/1210000008466178">babel-preset-env：你需要的唯一Babel插件</a></li>
<li><a target="_blank" rel="noopener" href="https://segmentfault.com/a/1190000009065987">Runtime transform 运行时编译es6</a></li>
</ul>
</section>
    <!-- Tags START -->
    
      <div class="tags">
        <span>Tags:</span>
        
  <a href="/tags#webpack" >
    <span class="tag-code">webpack</span>
  </a>

      </div>
    
    <!-- Tags END -->
    <!-- NAV START -->
    
  <div class="nav-container">
    <!-- reverse left and right to put prev and next in a more logic postition -->
    
      <a class="nav-left" href="/2020/02/03/Vue%E6%96%B0%E6%89%8B%E8%BF%9B%E9%98%B6%E6%8C%87%E5%8D%97/">
        <span class="nav-arrow">← </span>
        
          Vue新手进阶指南
        
      </a>
    
    
      <a class="nav-right" href="/2020/03/15/%E6%B5%85%E8%B0%88Java%E5%AF%B9%E8%B1%A1%E5%9B%9B%E5%A4%A7%E5%BC%95%E7%94%A8/">
        
          浅谈Java对象四大引用
        
        <span class="nav-arrow"> →</span>
      </a>
    
  </div>

    <!-- NAV END -->
    <!-- 打赏 START -->
    
      <div class="money-like">
        <div class="reward-btn">
          赏
          <span class="money-code">
            <span class="alipay-code">
              <div class="code-image"></div>
              <b>使用支付宝打赏</b>
            </span>
            <span class="wechat-code">
              <div class="code-image"></div>
              <b>使用微信打赏</b>
            </span>
          </span>
        </div>
        <p class="notice">若你觉得我的文章对你有帮助，欢迎点击上方按钮对我打赏</p>
      </div>
    
    <!-- 打赏 END -->
    <!-- 二维码 START -->
    
      <div class="qrcode">
        <canvas id="share-qrcode"></canvas>
        <p class="notice">扫描二维码，分享此文章</p>
      </div>
    
    <!-- 二维码 END -->
    
      <!-- Utterances START -->
      <div id="utterances"></div>
      <script src="https://utteranc.es/client.js"
        repo="ltyeamin/blogtalks"
        issue-term="pathname"
        theme="github-light"
        crossorigin="anonymous"
        async></script>    
      <!-- Utterances END -->
    
  </article>
  <!-- Article END -->
  <!-- Catalog START -->
  
    <aside class="catalog-container">
  <div class="toc-main">
    <strong class="toc-title">Catalog</strong>
    
      <ol class="toc-nav"><li class="toc-nav-item toc-nav-level-1"><a class="toc-nav-link" href="#1-%E4%B8%BA%E4%BB%80%E4%B9%88%E8%A6%81%E5%AD%A6%E4%B9%A0webpack"><span class="toc-nav-text">1. 为什么要学习webpack</span></a><ol class="toc-nav-child"><li class="toc-nav-item toc-nav-level-2"><a class="toc-nav-link" href="#1-1-Web%E7%AB%99%E7%82%B9%E7%9A%84%E8%B5%84%E6%BA%90%E7%B1%BB%E5%9E%8B"><span class="toc-nav-text">1.1 Web站点的资源类型</span></a><ol class="toc-nav-child"><li class="toc-nav-item toc-nav-level-3"><a class="toc-nav-link" href="#1-1-1-%E9%9D%99%E6%80%81%E8%B5%84%E6%BA%90"><span class="toc-nav-text">1.1.1 静态资源</span></a></li><li class="toc-nav-item toc-nav-level-3"><a class="toc-nav-link" href="#1-1-2-%E5%8A%A8%E6%80%81%E8%B5%84%E6%BA%90"><span class="toc-nav-text">1.1.2 动态资源</span></a></li></ol></li><li class="toc-nav-item toc-nav-level-2"><a class="toc-nav-link" href="#1-2-%E5%BC%95%E5%85%A5%E7%BD%91%E9%A1%B5%E8%B5%84%E6%BA%90%E5%AF%BC%E8%87%B4%E7%9A%84%E9%97%AE%E9%A2%98"><span class="toc-nav-text">1.2 引入网页资源导致的问题</span></a></li><li class="toc-nav-item toc-nav-level-2"><a class="toc-nav-link" href="#1-3-%E8%A7%A3%E5%86%B3%E6%96%B9%E6%A1%88"><span class="toc-nav-text">1.3 解决方案</span></a><ol class="toc-nav-child"><li class="toc-nav-item toc-nav-level-3"><a class="toc-nav-link" href="#1-3-1-%E9%80%9A%E7%94%A8%E8%A7%A3%E5%86%B3%E6%96%B9%E6%A1%88"><span class="toc-nav-text">1.3.1 通用解决方案</span></a></li><li class="toc-nav-item toc-nav-level-3"><a class="toc-nav-link" href="#1-3-2-%E5%AE%8C%E7%BE%8E%E8%A7%A3%E5%86%B3%E6%96%B9%E6%A1%88"><span class="toc-nav-text">1.3.2 完美解决方案</span></a></li></ol></li></ol></li><li class="toc-nav-item toc-nav-level-1"><a class="toc-nav-link" href="#2-webpack%E5%9F%BA%E7%A1%80"><span class="toc-nav-text">2. webpack基础</span></a><ol class="toc-nav-child"><li class="toc-nav-item toc-nav-level-2"><a class="toc-nav-link" href="#2-1-webpack%E5%AE%89%E8%A3%85%E7%9A%84%E4%B8%A4%E7%A7%8D%E6%96%B9%E5%BC%8F"><span class="toc-nav-text">2.1 webpack安装的两种方式</span></a></li><li class="toc-nav-item toc-nav-level-2"><a class="toc-nav-link" href="#2-2-%E5%88%9D%E6%AD%A5%E4%BD%BF%E7%94%A8webpack%E6%89%93%E5%8C%85%E6%9E%84%E5%BB%BA%E5%88%97%E8%A1%A8%E9%9A%94%E8%A1%8C%E5%8F%98%E8%89%B2%E6%A1%88%E4%BE%8B"><span class="toc-nav-text">2.2 初步使用webpack打包构建列表隔行变色案例</span></a></li><li class="toc-nav-item toc-nav-level-2"><a class="toc-nav-link" href="#2-3-webpack%E9%85%8D%E7%BD%AE%E6%96%87%E4%BB%B6%E5%90%8E%E7%AE%80%E5%8C%96%E6%89%93%E5%8C%85"><span class="toc-nav-text">2.3 webpack配置文件后简化打包</span></a><ol class="toc-nav-child"><li class="toc-nav-item toc-nav-level-3"><a class="toc-nav-link" href="#2-3-1-webpack%E9%85%8D%E7%BD%AE"><span class="toc-nav-text">2.3.1 webpack配置</span></a></li><li class="toc-nav-item toc-nav-level-3"><a class="toc-nav-link" href="#2-3-2-%E5%AE%9E%E7%8E%B0webpack%E7%9A%84%E5%AE%9E%E6%97%B6%E6%89%93%E5%8C%85%E6%9E%84%E5%BB%BA"><span class="toc-nav-text">2.3.2 实现webpack的实时打包构建</span></a></li></ol></li><li class="toc-nav-item toc-nav-level-2"><a class="toc-nav-link" href="#2-4-%E4%BD%BF%E7%94%A8html-webpack-plugin%E6%8F%92%E4%BB%B6%E9%85%8D%E7%BD%AE%E5%90%AF%E5%8A%A8%E9%A1%B5%E9%9D%A2"><span class="toc-nav-text">2.4 使用html-webpack-plugin插件配置启动页面</span></a></li><li class="toc-nav-item toc-nav-level-2"><a class="toc-nav-link" href="#2-5-%E5%AE%9E%E7%8E%B0%E8%87%AA%E5%8A%A8%E6%89%93%E5%BC%80%E6%B5%8F%E8%A7%88%E5%99%A8%E3%80%81%E7%83%AD%E6%9B%B4%E6%96%B0%E5%92%8C%E9%85%8D%E7%BD%AE%E6%B5%8F%E8%A7%88%E5%99%A8%E7%9A%84%E9%BB%98%E8%AE%A4%E7%AB%AF%E5%8F%A3%E5%8F%B7"><span class="toc-nav-text">2.5 实现自动打开浏览器、热更新和配置浏览器的默认端口号</span></a><ol class="toc-nav-child"><li class="toc-nav-item toc-nav-level-3"><a class="toc-nav-link" href="#2-5-1-%E6%96%B9%E5%BC%8F1"><span class="toc-nav-text">2.5.1 方式1</span></a></li><li class="toc-nav-item toc-nav-level-3"><a class="toc-nav-link" href="#2-5-2-%E6%96%B9%E5%BC%8F2"><span class="toc-nav-text">2.5.2 方式2</span></a></li></ol></li><li class="toc-nav-item toc-nav-level-2"><a class="toc-nav-link" href="#2-6-%E4%BD%BF%E7%94%A8webpack%E6%89%93%E5%8C%85css%E6%96%87%E4%BB%B6"><span class="toc-nav-text">2.6 使用webpack打包css文件</span></a></li><li class="toc-nav-item toc-nav-level-2"><a class="toc-nav-link" href="#2-7-%E4%BD%BF%E7%94%A8webpack%E6%89%93%E5%8C%85less%E6%96%87%E4%BB%B6"><span class="toc-nav-text">2.7 使用webpack打包less文件</span></a></li><li class="toc-nav-item toc-nav-level-2"><a class="toc-nav-link" href="#2-8-%E4%BD%BF%E7%94%A8webpack%E6%89%93%E5%8C%85sass%E6%96%87%E4%BB%B6"><span class="toc-nav-text">2.8 使用webpack打包sass文件</span></a></li><li class="toc-nav-item toc-nav-level-2"><a class="toc-nav-link" href="#2-9-%E4%BD%BF%E7%94%A8webpack%E5%A4%84%E7%90%86css%E4%B8%AD%E7%9A%84%E8%B7%AF%E5%BE%84"><span class="toc-nav-text">2.9 使用webpack处理css中的路径</span></a></li><li class="toc-nav-item toc-nav-level-2"><a class="toc-nav-link" href="#2-10-%E4%BD%BF%E7%94%A8babel%E5%A4%84%E7%90%86%E9%AB%98%E7%BA%A7JS%E8%AF%AD%E6%B3%95"><span class="toc-nav-text">2.10 使用babel处理高级JS语法</span></a></li><li class="toc-nav-item toc-nav-level-2"><a class="toc-nav-link" href="#2-11-webpack-%E5%A4%84%E7%90%86%E7%AC%AC%E4%B8%89%E6%96%B9%E6%96%87%E4%BB%B6%E7%B1%BB%E5%9E%8B%E7%9A%84%E8%BF%87%E7%A8%8B"><span class="toc-nav-text">2.11 webpack 处理第三方文件类型的过程</span></a></li><li class="toc-nav-item toc-nav-level-2"><a class="toc-nav-link" href="#2-12-webpack%E6%80%BB%E7%BB%93"><span class="toc-nav-text">2.12 webpack总结</span></a></li></ol></li><li class="toc-nav-item toc-nav-level-1"><a class="toc-nav-link" href="#3-npm%E6%89%A9%E5%B1%95%E4%B9%8Bnrm"><span class="toc-nav-text">3. npm扩展之nrm</span></a><ol class="toc-nav-child"><li class="toc-nav-item toc-nav-level-2"><a class="toc-nav-link" href="#3-1-npm%E9%BB%98%E8%AE%A4%E4%BE%9D%E8%B5%96%E4%B8%8B%E8%BD%BD%E5%9C%B0%E5%9D%80"><span class="toc-nav-text">3.1 npm默认依赖下载地址</span></a></li><li class="toc-nav-item toc-nav-level-2"><a class="toc-nav-link" href="#3-2-nrm%E4%BD%BF%E7%94%A8"><span class="toc-nav-text">3.2 nrm使用</span></a></li></ol></li><li class="toc-nav-item toc-nav-level-1"><a class="toc-nav-link" href="#4-webpack%E4%B8%AD%E4%BD%BF%E7%94%A8Vue"><span class="toc-nav-text">4.webpack中使用Vue</span></a><ol class="toc-nav-child"><li class="toc-nav-item toc-nav-level-2"><a class="toc-nav-link" href="#4-1-%E5%AE%89%E8%A3%85Vue%E4%BE%9D%E8%B5%96"><span class="toc-nav-text">4.1 安装Vue依赖</span></a></li><li class="toc-nav-item toc-nav-level-2"><a class="toc-nav-link" href="#4-2-%E9%85%8D%E7%BD%AEvue%E5%8D%95%E9%A1%B5%E9%9D%A2%E6%96%87%E4%BB%B6"><span class="toc-nav-text">4.2 配置vue单页面文件</span></a></li><li class="toc-nav-item toc-nav-level-2"><a class="toc-nav-link" href="#4-3-webpack%E7%8E%AF%E5%A2%83%E6%B8%B2%E6%9F%93-vue%E6%96%87%E4%BB%B6"><span class="toc-nav-text">4.3 webpack环境渲染.vue文件</span></a></li><li class="toc-nav-item toc-nav-level-2"><a class="toc-nav-link" href="#4-4-vue%E5%AE%98%E6%96%B9%E8%84%9A%E6%89%8B%E6%9E%B6"><span class="toc-nav-text">4.4 vue官方脚手架</span></a><ol class="toc-nav-child"><li class="toc-nav-item toc-nav-level-3"><a class="toc-nav-link" href="#4-4-1-%E4%BB%80%E4%B9%88%E6%98%AFvue%E8%84%9A%E6%89%8B%E6%9E%B6"><span class="toc-nav-text">4.4.1 什么是vue脚手架</span></a></li><li class="toc-nav-item toc-nav-level-3"><a class="toc-nav-link" href="#4-4-2-vue-cli3-x-%E5%AE%89%E8%A3%85%E5%92%8C%E4%BD%BF%E7%94%A8"><span class="toc-nav-text">4.4.2 vue-cli3.x+安装和使用</span></a></li><li class="toc-nav-item toc-nav-level-3"><a class="toc-nav-link" href="#4-4-3-vue-cli2-x%E5%AE%89%E8%A3%85%E5%92%8C%E4%BD%BF%E7%94%A8"><span class="toc-nav-text">4.4.3 vue-cli2.x安装和使用</span></a></li><li class="toc-nav-item toc-nav-level-3"><a class="toc-nav-link" href="#4-4-5-vue%E8%84%9A%E6%89%8B%E6%9E%B6%E9%A1%B9%E7%9B%AE%E7%BB%93%E6%9E%84%E5%88%86%E6%9E%90"><span class="toc-nav-text">4.4.5 vue脚手架项目结构分析</span></a></li></ol></li></ol></li><li class="toc-nav-item toc-nav-level-1"><a class="toc-nav-link" href="#5-%E7%9B%B8%E5%85%B3%E6%96%87%E7%AB%A0"><span class="toc-nav-text">5. 相关文章</span></a></li></ol>
    
  </div>
</aside>
  
  <!-- Catalog END -->
</main>

<script>
  (function () {
    var url = 'http://example.com/2020/02/11/前端构建工具webpack入门/';
    var banner = ''
    if (banner !== '' && banner !== 'undefined' && banner !== 'null') {
      $('#article-banner').css({
        'background-image': 'url(' + banner + ')'
      })
    } else {
      $('#article-banner').geopattern(url)
    }
    $('.header').removeClass('fixed-header')

    // error image
    $(".markdown-content img").on('error', function() {
      $(this).attr('src', '/css/images/error_icon.png')
      $(this).css({
        'cursor': 'default'
      })
    })

    // zoom image
    $(".markdown-content img").on('click', function() {
      var src = $(this).attr('src')
      if (src !== '/css/images/error_icon.png') {
        var imageW = $(this).width()
        var imageH = $(this).height()

        var zoom = ($(window).width() * 0.95 / imageW).toFixed(2)
        zoom = zoom < 1 ? 1 : zoom
        zoom = zoom > 2 ? 2 : zoom
        var transY = (($(window).height() - imageH) / 2).toFixed(2)

        $('body').append('<div class="image-view-wrap"><div class="image-view-inner"><img src="'+ src +'" /></div></div>')
        $('.image-view-wrap').addClass('wrap-active')
        $('.image-view-wrap img').css({
          'width': `${imageW}`,
          'transform': `translate3d(0, ${transY}px, 0) scale3d(${zoom}, ${zoom}, 1)`
        })
        $('html').css('overflow', 'hidden')

        $('.image-view-wrap').on('click', function() {
          $(this).remove()
          $('html').attr('style', '')
        })
      }
    })
  })();
</script>


  <script>
    var qr = new QRious({
      element: document.getElementById('share-qrcode'),
      value: document.location.href
    });
  </script>






    <div class="scroll-top">
  <span class="arrow-icon"></span>
</div>
    <footer class="app-footer">
  <p class="copyright">
    &copy; 2024 | Proudly powered by <a href="https://hexo.io" target="_blank">Hexo</a>
    <br>
    Theme by <a target="_blank" rel="noopener" href="https://github.com/ltyeamin">tong.li</a>
  </p>
</footer>

<script>
  function async(u, c) {
    var d = document, t = 'script',
      o = d.createElement(t),
      s = d.getElementsByTagName(t)[0];
    o.src = u;
    if (c) { o.addEventListener('load', function (e) { c(null, e); }, false); }
    s.parentNode.insertBefore(o, s);
  }
</script>
<script>
  async("https://cdn.staticfile.org/fastclick/1.0.6/fastclick.min.js", function(){
    FastClick.attach(document.body);
  })
</script>

<script>
  var hasLine = 'true';
  async("https://cdn.staticfile.org/highlight.js/9.12.0/highlight.min.js", function(){
    $('figure pre').each(function(i, block) {
      var figure = $(this).parents('figure');
      if (hasLine === 'false') {
        figure.find('.gutter').hide();
      }
      hljs.configure({useBR: true});
      var lang = figure.attr('class').split(' ')[1] || 'code';
      var codeHtml = $(this).html();
      var codeTag = document.createElement('code');
      codeTag.className = lang;
      codeTag.innerHTML = codeHtml;
      $(this).attr('class', '').empty().html(codeTag);
      figure.attr('data-lang', lang.toUpperCase());
      hljs.highlightBlock(block);
    });
  })
</script>
<!-- Baidu Tongji -->



<script src='https://cdn.staticfile.org/mermaid/8.11.2/mermaid.min.js'></script>



<script src="/js/script.js"></script>


  </body>
</html>